/*
 * @描述: 饼图
 * @Author: /songzi
 * @Date: 2019-08-19 09:35:39
 * @Last Modified by: songzi
 * @Last Modified time: 2019-08-19 10:31:43
 */

import React, { PureComponent, Fragment } from 'react';
import DataSet from '@antv/data-set';
import { Chart, Geom, Axis, Tooltip, Legend, Coord, Guide, Line, Label } from 'bizcharts';

class Donut extends PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Fragment>
        <Coord type="theta" radius={0.8} innerRadius={0.8} />

        <Axis name="percent" />
        {/* <Legend position="right" offsetY={-window.innerHeight / 2 + 120} offsetX={-100} /> */}
        {/* <Tooltip
          showTitle={false}
          itemTpl='<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
        /> */}
        <Guide></Guide>
        <Geom
          type="intervalStack"
          position="percent"
          color={['value', '#f44336-#9c27b0-#2196f3-#ffc107']}
          tooltip={[
            '$network_type*percent',
            (item, percent) => {
              percent = `${(percent * 100).toFixed(2)}%`;
              return {
                name: item,
                value: percent,
              };
            },
          ]}
          style={{
            lineWidth: 1,
            stroke: '#fff',
          }}
        >
          <Label content="percent" formatter={(val, item) => `${item.point.$network_type}: ${val}`} />
        </Geom>
      </Fragment>
    );
  }
}

export default Donut;
